<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:a="http://richfaces.org/a4j"
      xmlns:r="http://richfaces.org/rich"
      xmlns:m="http://www.caradvert.com/main">


    <ui:composition template="/content/templates/myMenuTemplate.xhtml">
        <ui:param name="selectedMenuSub1" value="adverts"/>
        <ui:define name="title">#{labels['EDIT_ADVERT']}</ui:define>
        <ui:define name="headContent">
            <script type="text/javascript" src="/resources/lightbox/lightbox.js"></script>
            <link rel="stylesheet" href="/resources/lightbox/lightbox.css" type="text/css"/>
        </ui:define>         
        <ui:decorate template="/content/templates/contentDecorator.xhtml">

            <div style="padding:0 20px 0 20px">

                <fieldset class="newAdvert">
                    <legend>#{labels['ADD_PHOTO']}&#160;(#{labels['MAXIMUM']} #{config.photoQuantity})</legend>

                    <h:form>
                        <table class="lj fullWide">
                            <h:panelGroup rendered="#{sellAdvertBean.advert.images.size() gt 0}">
                                <tr>
                                    <td colspan="2">&#160;</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="cj">
                                        <h:panelGrid columns="3" style="margin:0 auto 0 auto;">
                                            <c:forEach items="#{sellAdvertBean.advert.images}" var="image">
                                                <h:panelGroup layout="block" styleClass="lj" style="width:#{config.imageConfig.previewWidth + 20}px;">
                                                    <h:outputLink value="#{config.imageConfig.uploadedUri}/#{image.id}.jpg" rel="lightbox">
                                                        <h:graphicImage styleClass="thumbnail" url="#{config.imageConfig.uploadedUri}/#{image.id}_preview.jpg" title="#{labels['CLICK_TO_ENLARGE']}"/>
                                                    </h:outputLink>
                                                </h:panelGroup>
                                            </c:forEach>
                                        </h:panelGrid>
                                    </td>
                                </tr>
                            </h:panelGroup>                            
                            <tr>
                                <td colspan="2">
                                    &#160;
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" class="oneQuarter">
                                    <h:outputLabel id="photosLbl" value="#{labels['PHOTOS']}:"/>
                                </td>
                                <td>
                                    <h:panelGroup id="photosPanel">
                                        <r:fileUpload fileUploadListener="#{sellAdvertBean.onFileUploaded}"
                                                      acceptedTypes="jpeg, jpg" maxFilesQuantity="#{config.photoQuantity - sellAdvertBean.advert.images.size()}" noDuplicate="true" allowFlash="true"
                                                      fileEntryClass="uploadEntryClass"
                                                      addControlLabel="#{labels['ADD']}" uploadControlLabel="#{labels['UPLOAD']}" cancelEntryControlLabel="#{labels['CANCEL']}"
                                                      clearAllControlLabel="#{labels['CLEAR_ALL']}" clearControlLabel="#{labels['CLEAR']}" doneLabel="#{labels['DONE']}"
                                                      stopControlLabel="#{labels['STOP']}" stopEntryControlLabel="#{labels['STOP']}"
                                                      sizeErrorLabel="#{labels['SIZE_ERROR']}" transferErrorLabel="#{labels['TRANSFER_ERROR']}"
                                                      listWidth="350px" listHeight="124px"/>
                                        <span style="font-size:8pt;">
                                            *#{labels['MAX_FILE_SIZE_WARNING']}
                                        </span>
                                    </h:panelGroup>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">&#160;</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="rj">
                                    <h:panelGroup id="saveButton">
                                        <h:commandButton value="#{labels['READY']}" action="#{sellAdvertBean.saveImages}"/>&#160;
                                        <h:commandButton value="#{labels['CANCEL']}" action="#{sellAdvertBean.cancel}" immediate="true"/>
                                    </h:panelGroup>
                                </td>
                            </tr>
                        </table>
                    </h:form>
                </fieldset>
            </div>

        </ui:decorate>
    </ui:composition>
</html>